import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Container, Content, } from 'native-base';
import { connect } from 'react-redux';

import { Header, Loading, ScrollTopArea } from '../../component';
import { Colors } from '../../theme';
import SystemMessage from './SystemMessage';
import MyMessage from './MyMessage';

class Message extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectIndex: 0,
            isLoading: false
        };
    }

    render() {
        return (
            <Container>
                <Header title="消息" onLeftPress={() => this.props.navigation.goBack()} />
                <Loading showLoading={this.state.isLoading} />
                {/* <Content> */}
                    <ScrollTopArea
                        labelList={['公告', '站内消息']}
                        initinalIndex={this.state.selectIndex}
                        topBarInactiveTextColor={Colors.bai}
                        topBarActiveTextColor={Colors.bai}
                        topBarActiveBackgroundColor={Colors.subject}
                        topBarInactiveBackgroundColor={Colors.hui99}
                        topBar={Colors.subjectJbZuo}
                        onChange={e => this.setState({ selectIndex: e })}
                    >
                        <SystemMessage isFocus={this.state.selectIndex === 0} navigate={this.props.navigation.navigate} />
                        <MyMessage isFocus={this.state.selectIndex === 1} navigate={this.props.navigation.navigate} />
                    </ScrollTopArea>
                {/* </Content> */}
            </Container>
        )
    }

}

const mapStateToProps = state => ({
    logged: state.user.logged,
});

const mapDispatchToProps = dispatch => ({
});

export default connect(mapStateToProps, mapDispatchToProps)(Message);


const Styles = StyleSheet.create({
    
});



